<!DOCTYPE html>
<html lang="zh-hans">
    <head>
        <meta charset="utf-8" />
        <title>我的网站</title>
        <style type="text/css">
            .image-box {
                display: flex;
                justify-content: space-around;
            }
            img {
                max-height: 20%;
                max-width: 20%;
            }

            .text-box {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="text-box">
            <h1>我的世界</h1>
            <p>这是我的小网站，欢迎参观！</p>
            <p id="txtDelay">正在加载...</p>
        </div>
        <div class="image-box">
            <img src="/image/1.jpg" alt="我们的地球" />
            <img src="/image/1.jpg" alt="我们的地球" />
            <img src="/image/1.jpg" alt="我们的地球" />
        </div>
        <script type="text/javascript">
            var x = 1;
            setInterval(function () {
                const h1Head = document.querySelector("h1");
                if (x%2 == 1)
                    h1Head.innerText = "你的世界";
                else
                    h1Head.innerText = "我的世界";
                x++;
            }, 3000); // 每3秒执行一次

            // 5秒后执行一次
            setTimeout(function () {
                // 发出请求
                const resp = fetch("/hello");
                // 等待回应
                resp.then(function (data) {
                    if (data.status == 200) { // okay
                        data.text().then(function (txt) {
                            console.info(txt);
                            document.querySelector("#txtDelay").innerText = txt;
                        });
                    }
                    else if (data.status == 404) {
                    }
                    else {
                    }
                });
            }, 5000);
        </script>
    </body>
</html>